<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			
			* {
				padding: 0;
				margin: 0;
			}

			div {
				width: 300px;
				height: 300px;
				background-color: blue;
				margin: 200px auto 0;
				animation: roll 10s infinite;
			}

			div:hover {
				/* 动画播放状态: paused 暂停, running 运行; */
				animation-play-state: paused;
			}

			@keyframes roll {
				from {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(360deg);
				}
			}


		</style>
	</head>
	<body>

		<div></div>
		
		
	</body>
</html>